<template>
	<view>
		
		<view class="login_top">
			<view class="h60">
				
			</view>
			<view class="flex aj-center relative z-index9 mt50"><image class="wh160 block radius50" src="/static/images/default-tx.png" mode=""></image></view>
		</view>
		<view class="qui-card login_card">
			<view class="flex tc ptb40 fs36 login_tab">
				<view   class="flex-item ptb30" :class="cur == 2 ? 'active' : ''">注册</view>
			</view>
			<view class="card-bd" v-show="cur == 1">
				<view class="flex a-center">
					<view class="bor-1px-r plr30 mr30"><image class="block wh40" src="/static/images/login_user_icon.png" mode="widthFix"></image></view>
					<view class="flex-item bor-1px-b ptb20"><input maxlength="11" v-model="form.mobile" class="qui-input" type="text" value="" placeholder="请输入手机号或邮箱" /></view>
				</view>
				<view class="flex a-center mt50">
					<view class="bor-1px-r plr30 mr30"><image class="block wh40" src="/static/images/login_pwd_icon.png" mode="widthFix"></image></view>
					<view class="flex-item bor-1px-b ptb20">
						<input :password="true" v-model="form.password" class="qui-input" type="text" value="" placeholder="请输入密码" />
					</view>
				</view>
				<!-- <label class="flex a-center mt30 pl20">
					<radio :checked="remember" color="#57EBC1" style="transform: scale(0.5);" value="" />
					<text class="ml0 fs24">记住密码</text>
				</label> -->

				<view class="plr30 mt30" style=""><view @click="submit" class="qui-btn round fs36">登陆</view></view>
				<view class="tc flex aj-center mt30 pb50">
					忘记密码？
					<navigator url="/pages/forget/forget" class="text-yellow">找回密码</navigator>
				</view>
			</view>
			<view class="card-bd" v-show="cur == 2">
				<view class="flex a-center">
					<view class="bor-1px-r plr30 mr30"><image class="block wh40" src="../../static/images/login_user_icon.png" mode="widthFix"></image></view>
					<view class="flex-item bor-1px-b ptb20"><input v-model="regForm.mobile" class="qui-input" type="text" value="" placeholder="请输入手机号" /></view>
				</view>
				<view class="flex a-center mt20">
					<view class="bor-1px-r plr30 mr30"><image class="block wh40" src="../../static/images/login_yzm_icon.png" mode="widthFix"></image></view>
					<view class="flex-item bor-1px-b ptb20"><input v-model="regForm.mobile_code" class="qui-input" type="text" value="" placeholder="请输入验证码" /></view>
					<view class="qui-btn w160 bg-gray inline small"><send-code type="1" :tel="regForm.mobile"></send-code></view>
				</view>
				<view class="flex a-center mt20">
					<view class="bor-1px-r plr30 mr30"><image class="block wh40" src="../../static/images/login_pwd_icon.png" mode="widthFix"></image></view>
					<view class="flex-item bor-1px-b ptb20"><input v-model="regForm.password" class="qui-input" type="text" value="" placeholder="请输入密码" /></view>
				</view>
				<view class="flex a-center mt20">
					<view class="bor-1px-r plr30 mr30"><image class="block wh40" src="../../static/images/login_yqm_icon.png" mode="widthFix"></image></view>
					<view class="flex-item bor-1px-b ptb20"><input v-model="regForm.code" class="qui-input" type="text" value="" placeholder="请输入邀请码" /></view>
				</view>

				<view class="plr30 mt30" style=""><view @click="regSubmit" class="qui-btn round fs36">注册</view></view>
				<view class="flex a-center mt30 pl20">
					<radio @click="agree" :checked="isAgree" color="#57EBC1" style="transform: scale(0.5);" value="" />
					<text class="fs24">我已仔细阅读并同意</text>
					<text @click="agreeShow = true" class="text-yellow">《用户协议》</text>
				</view>
			</view>
		</view>
		<view class="login_bottom"></view>
		<view v-show="agreeShow" class="bg-white" style="width: 100vw; height: 100vh; overflow: auto; position: fixed; left:0; top:0; z-index: 999;">
			<view class="plr30 ptb30"><parser :html="agreement" /></view>
			<view class="tc ptb30">
				<view @click="agree" class="qui-btn round inline">
					阅读并同意
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import Config from '@/utils/config';
import Parser from '@/components/jyf-parser/jyf-parser.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import sendCode from '@/components/send-code.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		sendCode,
		uniPopup,
		Parser
	},
	data() {
		return {
			agreeShow: false,
			tel: '',
			cur: 2,
			remember: false,
			agreement: '',
			isAgree: false,
			form: {
				password: '',
				mobile: ''
			},
			regForm: {
				password: '',
				mobile: '',
				mobile_code: '',
				code: ''
			}
		};
	},
	onLoad(e) {
		this.regForm.code = e.code
		this.isLogin(false)
		this.getAgreement()
		// this.domain = Config.http + Config.getHostName();
	},
	methods: {
		...mapMutations(['NavChange', 'login']),
		submit() {
			
			let vRules = [{ name: 'mobile', required: true, type: 'phone', errmsg: '请输入正确的手机号' }, { name: 'password', type: 'required', errmsg: '请输入密码' }];
			let vRes = this.$validate.validate(this.form, vRules);

			if (!vRes.isOk) {
				uni.showToast({
					icon: 'none',
					title: vRes.errmsg
				});
				return false;
			}

			this.vlogin();
		},
		async vlogin() {
		/* 	uni.showLoading({
				mask: true,
				title: '登录中'
			}); */
			const res = await this.post('/api/user/login', this.form);
			if (res.code == 0) {
				this.login(res.data);
				uni.setStorageSync('token', res.data.token);
				this.NavChange('home');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}, 900);
			} 
		},
		tab(cur) {
			this.cur = cur;
		},
		regSubmit() {
			if(!this.isAgree) {
				uni.showToast({
					icon: 'none',
					title: '请仔细阅读并同意用户协议'
				});
				return
			}
			let vRules = [
				{ name: 'mobile', required: true, type: 'phone', errmsg: '请输入正确的手机号' },
				{ name: 'password', type: 'required', errmsg: '请输入密码' },
				// {name: 'confirm_password', type: 'required', errmsg: '请输入确认密码'},
				// {name: 'password', type: 'eq', eqName: 'confirm_password', required: true, errmsg: '两次输入密码不一致'},
				{ name: 'mobile_code', type: 'required', errmsg: '请输入验证码' },
				{ name: 'code', type: 'required', errmsg: '请输入推荐码' }
			];

			let vRes = this.$validate.validate(this.regForm, vRules);

			if (!vRes.isOk) {
				uni.showToast({
					icon: 'none',
					title: vRes.errmsg
				});
				return false;
			}
			this.reg();
		},
		async reg() {
			const res = await this.post('/api/user/registered', this.regForm);
			this.success(res, '注册成功,请登录~', function() {
				this.cur = 1;
			});
		},
		async getAgreement() {
			const res = await this.get('/api/agreement');
			this.agreement = res.data.user_agreement;
		},
		agree() {
			this.isAgree = true
			this.agreeShow = false
		}
	}
};
</script>

<style lang="scss">
.login_tab {
	.active {
		position: relative;
		color: var(--themeColor);
		font-weight: 600;
		&::after {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			content: '';
			height: 4rpx;
			width: 80rpx;
			background-color: var(--themeColor);
		}
	}
}
.login_top {
	position: relative;
	width: 750rpx;
	height: 500rpx;
	transform: scaleZ();
	overflow: hidden;
	margin-bottom: -200rpx;
	&::after {
		bottom: 0;
		left: 0;
		position: absolute;
		display: block;
		content: '';
		width: 750rpx;
		height: 500rpx;
		background: linear-gradient(0deg, rgba(124, 224, 130, 1), rgba(73, 240, 218, 1));
		border-radius: 50%;
		transform: scale(2);
		transform-origin: center bottom;
	}
}
.login_bottom {
	left: 0;
	bottom: 0;
	position: fixed;
	width: 750rpx;
	height: 60rpx;
	transform: scaleZ();
	overflow: hidden;
	&::after {
		top: 0;
		left: 0;
		position: absolute;
		display: block;
		content: '';
		width: 750rpx;
		height: 220rpx;
		background-color: #57ebc1;
		border-radius: 50%;
		transform: scale(1.5);
		transform-origin: center top;
	}
}
page {
	background-color: #fff;
}
.login_card {
	border-radius: 20rpx;
	position: relative;
	z-index: 9;
	margin-left: 50rpx;
	margin-right: 50rpx;
	margin-top: 0;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}
</style>
